import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { _HttpClient } from '@delon/theme';
import { environment } from '../../../../../environments/environment';
import { TableComponent } from './table.component';
declare const echarts: any;

@Component({
    selector: 'app-tctj-primary',
    templateUrl: './primary.component.html',
    styleUrls: ['./tctj_statistics.component.less']
})

export class PrimaryComponent implements OnInit {
    @ViewChild('tab', { static: true }) tab: TableComponent;
    queryParam: any = {};
    headData = [];
    plainData = [];
    apiUrl: any = {};
    tableData: any = [];
    operaList: any = [
        { detailModal: false }
    ];
    tempData = [];

    constructor(
        private activatedRoute: ActivatedRoute
    ) { }

    ngOnInit() {
        this.activatedRoute.queryParams.subscribe(param => {
            Object.assign(this.queryParam, param);
            this.apiUrl.query = environment.project + '/skywinStat';
            this.apiUrl.detail = this.apiUrl.query + '/monthStatDetail';

            const name = [];
            const count = [];

            // 单位统计
            this.apiUrl.query += '/monthStatByOrgType';
            this.headData = [
                { "name": "主体单位", "width": "40%" },
                { "name": "批复计划", "width": "" }
            ];
            this.plainData = ["orgName", "planCount"];

            this.formatData(this.apiUrl.query, '&monthStr=' + param.month, (data) => {
                for (const item of data) {
                    name.push(item.orgName);
                    count.push(item.planCount);
                }
                echarts.init(document.getElementById('unit')).setOption({
                    color: ['#3ba0cc', '#70d4cd', '#66db87'],
                    legend: { data: [] },
                    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                    grid: { left: '30px', right: '30px', top: '30px', bottom: '0', containLabel: true },
                    xAxis: [{ type: 'category', data: name }],
                    yAxis: [{ type: 'value' }],
                    series: [
                        { name: '批复计划', type: 'bar', data: count, label: { normal: { show: true, position: 'top' } } }
                    ]
                });
                // 临时解决左右等高
                setTimeout(() => {
                    const lh = document.getElementById("left").clientHeight;
                    const rh = document.getElementById("right").clientHeight;
                    const unit = document.getElementById("unit");
                    const stat = document.getElementById("statistics");

                    if (lh > rh) {
                        stat.style.marginTop = lh - rh + 'px';
                    } else {
                        unit.style.marginTop = rh - lh + 'px';
                    }
                }, 1000);
            });
        });
    }
    formatData(url, param, callback?) {
        this.tab.loadList(url, param, (data) => {
            const edata: any = [];
            Object.assign(edata, data);
            edata.length = edata.length - 1;
            callback(edata)
        });
    }
    detail(e) {
        this.tempData = e;
        this.modalShow('detailModal');
    }
    modalShow(type) {
        this.operaList[type] = true;
    }
    modalHide(type) {
        this.operaList[type] = false;
    }
}
